<template>
  <view class="order-confirm">
		<NavBar title="订单确认"/>
		<view class="content">
			<!-- 配送方式 -->
			<view class="take-type">
			  <view @tap="typeClick(item.shipments)" class="take-item" :class="shipments==item.shipments?'a-item':''" v-for="item in shipmentsList" :key="item"> {{item.shipments_name}} </view>
			</view>
			<!-- 地址 -->
			 <!-- 同城and快递 -->
			<view class="address" v-if="shipments == '1' || shipments == '3'" @tap="selectAddress">
			  <image src="/static/icon/order/location.png" class="a-img"/>
			  <view class="address-info" v-if="orderInfo.defaultAddress||defaultAddress">
			    <view class="phone"> {{defaultAddress?.name}} {{defaultAddress?.phone}} </view>
			    <view class="address-text">
						{{defaultAddress?.modify_region?.name}}
			      {{defaultAddress?.addr}}
			    </view>
			  </view>
				<view class="address-info" v-else>
					<view class="address-text"> 请选择收货地址 </view>
				</view>
			  <image src="/static/icon/order/right.png" class="a-img"/>
			</view>
			<!-- 到店自提 -->
			<view class="zq-address" v-else>
				<view class="zq-name">
					 <view class="phone"> {{shopInfo.name}} {{shopInfo.help_mobile}} </view>
					 <image src="/static/icon/order/right.png" class="z-img"/>
				</view>
			  <view class="zq-address-info">
					<image src="/static/icon/order/location.png"  class="zi-img"/>
			    <view class="address-text" @tap="openLoaction"> 
						<view class="text"> {{shopInfo.region}} {{shopInfo.detail_address}} </view>
						<image src="/static/icon/shop/nav.png" class="at-img"/>
					</view>
			  </view>
			  <view class="zq-time"> 提货时间：{{shipmentsTime}} | 营业时间正常提货 </view>
			</view>
			<!-- 预约送货时间 -->
			<view class="yy-time">
				<view class="text"> 预约{{shipments=='1'?'送货':shipments=='3'?'发货':'提货'}}时间 </view>
				<view class="select" :class="selectTime?'selected':''">
					<uni-datetime-picker v-model="selectTime" :start="startTime">
						{{ selectTime? selectTime: '选择配送时间' }}
						<image src="/static/icon/order/right.png" class="s-img"/>
					</uni-datetime-picker>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-info" v-for="item in orderInfo.items">
				<view class="shop-info">
					<image class="store" src="/static/icon/productDetails/store.png" />
					<view class="shop-name"> {{ item.shop?.name }} </view>
					<Tag :text="item.shop.type==1?'个人':'商家'" :bgc="item.shop.type==1?'#FF9B05':'#FF3B1E'" />
				</view>
				<view class="goods-list" v-for="goods in item.goods" :key="goods">
					<GoodsItem :goodsInfo="goods"/>
					<view class="intro">
						<view class="intro-name"> 商品备注 </view>
						<view class="intro-value">
							<textarea v-model="goods.note" maxlength="-1" placeholder="请输入备注内容" />
						</view>
					</view>
				</view>
				<view class="price">
					<text>商品金额</text>
					<text>￥{{item.goods_amount}}</text>
				</view>
				<view class="psf">
					<text>配送费</text>
					<text>￥{{item.delivery_money}}</text>
				</view>
				<view class="ps-type">
					<text>配送方式</text>
					<text>{{shipments=='1'?'同城配送':shipments=='3'?'普通快递':'门店自提'}}</text>
				</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="pay-type">
				<view class="title"> 支付方式 </view>
				<view class="pay-list">
					<view class="pay-item" @tap="switchPayType('alipay')" :class="payType == 'alipay'?'a-pay-item':''">
						<image src="/static/icon/order/al-pay.png" class="pay-img" />
						<view class="text"> 支付宝支付 </view>
					</view>
					<view class="pay-item" @tap="switchPayType('wechat')" :class="payType == 'wechat'?'a-pay-item':''">
						<image src="/static/icon/order/wx-pay.png" class="pay-img" />
						<view class="text"> 微信支付 </view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- 底部按钮 -->
			<view class="submit-order">
				<view class="order-price"> 合计：<text>￥<text>{{orderInfo.pay_amount=='0.00'?'面议':orderInfo.pay_amount}}</text></text> </view>
				<view class="sub-btn" @tap="submitOrder"> 提交订单 </view>
			</view>
		</view>
  </view>
</template>

<script setup>
  import { computed, ref, onUnmounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import Tag from '@/components/Tag.vue';
	import NavBar from '@/components/NavBar.vue';
	import GoodsItem from '@/components/OneGoodsItem.vue';
	import { GetShopShipmentsApi, GetOrderViewApi, SubmitOrderApi, GetShopDetailsApi } from '@/service/index.js'
	import { useAddressStore, useCartStore } from '@/store/index.js'
	const startTime = computed(() => {
		const date = new Date()
		const y = date.getFullYear()
		const m = date.getMonth() + 1
		const d = date.getDate()
		const h = date.getHours()
		const f = date.getMinutes()
		const s = date.getSeconds()
		return y+'-'+m+'-'+d+' '+h+':'+f+':'+s
	})
	const orderInfo = ref({
		delivery_money: "", //总配送费金额 shipments == 1的时候展示
		express_money: "", //总快递费  shipments == 3的时候展示
		coupon_amount: "",
		shop_total_amount: "",
		total_amount: "", //总支付金额
		goods_amount: "", //总商品金额
		pay_amount: "", //总实际支付金额
		delivery_amount: "",
		give_integral_true: "",
		member_id: '',
		items: [
			{
				goods: {},
				shop: {
					name: '',
					type: '', // 1个人 2商家
				}
			}
		], //商品数组
		discount: '',
		defaultAddress: ''
	})
	const shopInfo = ref({
		contact: '',
		help_mobile: '',
		open_time: '',
		over_time: '',
		region: '',
		detail_address: '',
		latitude: '',
		longitude: ''
	})
	const shipmentsList = ref([])
	const shipments = ref() // 1 同城配送 2 到店自提 3 快递配送	
	const shipmentsTime = ref()
	const payType = ref('wechat') // wechat 微信支付 alipay 支付宝支付
	const selectTime = ref('') // 选择的配送时间
	const sku_details = ref()
	const defaultAddress = computed(() => {
		const { checkedAddress } = useAddressStore()
		let address
		if(checkedAddress) address = checkedAddress
		else address = orderInfo.value.defaultAddress
		return address
	})
	// 前往地址页面选择地址
	const selectAddress = () => {
		uni.navigateTo({
			url: '/pages/address/address?checked=true'
		})
	}
	
  const typeClick = (id) => {
		if(shipments.value == id) return
		shipments.value = id
		getOrderInfo()
  }
	const switchPayType = (val) => {
		payType.value = val
	}
	// 获取商家详细信息
	const getShopDetails = (shop_id) => {
		GetShopDetailsApi({shop_id}).then(res => {
			shopInfo.value = res
		})
	}
	const openLoaction = () => {
		uni.openLocation({
			name: shopInfo.value.name,
			address: shopInfo.value.detail_address,
			latitude: Number(shopInfo.value.latitude),
			longitude: Number(shopInfo.value.longitude),
		})
	}
	// 获取是商家配送方式
	const getShipments = (shop_id) => {
		GetShopShipmentsApi({shop_id}).then(res => {
			res.forEach(item => {
				if(item.shipments == 2) shipmentsTime.value = item.pick_time
			})
			shipmentsList.value = res
			shipments.value = res[0].shipments
			getOrderInfo()
			getShopDetails(shop_id)
		})
	}
	// 获取页面信息
	const skuVal = ref()
	const getOrderInfo = () => {
		const { lonlat } = useAddressStore()
		const isArr = Array.isArray(skuVal.value)
		let sku_details
		if(isArr) sku_details = skuVal.value
		else sku_details = [ skuVal.value ]
		let params = {
			sku_details,
			latitude: lonlat.latitude,
			longitude: lonlat.longitude,
			shipments: shipments.value,
			pick_time: '2023-12-12 14:43:35'
		}
		GetOrderViewApi(params).then(res => {
			orderInfo.value = res
		}).catch(() => {
			setTimeout(() => {
				uni.navigateBack()
			}, 3000)
		})
	}
	// 提交订单
	const submitOrder = () => {
		const { lonlat } = useAddressStore()
		if(selectTime.value=='') return getApp().globalData.toast('请选择时间')
		let skuVal = []
		orderInfo.value.items.forEach((item, index) => {
			item.goods.forEach(goods => {
				skuVal.push({
					goods_item_id: goods.shop_goods_item_id,
					num: goods.num,
					goods_name: goods.goods_name,
					note: goods.note
				})
			})
		})
		let params = {
			sku_details: skuVal,
			longitude: lonlat.longitude,
			latitude: lonlat.latitude,
			shipments: shipments.value,
			pick_time: selectTime.value, // 预约提货时间 shipments == 2的时候必填 
			
		}
		if(shipments.value == 1) params.address_id = defaultAddress.value?.id
		if(!params.address_id&&shipments.value == 1) return getApp().globalData.toast('请选择地址')
		SubmitOrderApi(params).then(res => {
			uni.navigateTo({
				url: `/pages/checkstand/checkstand?total_amount=${res.total_amount}&trade_sn=${res.trade_sn}&pay_type=${payType.value}`
			})
		})
	}
	onLoad((e) => {
		const { params, shop_id } = e
		skuVal.value = JSON.parse(params)
		if(shop_id) {
			getShipments(shop_id)
		} else {
			shipmentsList.value = [{
				shipments: 1,
				shipments_name: "同城配送"
			}]
			shipments.value = 1
			getOrderInfo()
		}
	})
	onUnmounted(() => {
		const { SETCHECKEDADDRESS } = useAddressStore()
		SETCHECKEDADDRESS()
	})
</script>

<style lang="scss" scoped>
  .order-confirm {
		padding-bottom: 100px;
		.content {
			padding: 10px 12px;
		}
    // 配送方式
    .take-type {
      height: 40px;
			display: flex;
      padding: 8px 12px;
      border-radius: 10px;
      background-color: #fff;
      box-sizing: border-box;
			.take-item {
				flex: 1;
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				text-align: center;
				position: relative;
				&::before {
				  position: absolute;
				  top: 50%;
				  right: 0;
				  transform: translateY(-50%);
				  display: block;
				  content: '';
				  height: 24px;
				  width: 1px;
				  background-color: #D8D8D8;
				}
				&:nth-last-of-type(1) {
					&::before {
					  display: none;
					}
				}
				&.a-item {
					color: #FF3B1E;
				}
			}
    }
    // 地址
    .address {
      padding: 16px 10px;
      box-sizing: border-box;
      background-color: #fff;
      margin-top: 10px;
      border-radius: 10px;
      display: flex;
			align-items: center;
      .a-img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
				margin-bottom: auto;
        &:nth-last-of-type(1) {
          width: 16px;
          height: 16px;
					margin-bottom: 0;
					margin-right: 10px;
        }
      }
      .address-info {
				flex: 1;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
    }
		// 自取地址
		.zq-address {
			width: 100%;
			padding: 16px 10px;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 10px;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			// align-items: center;
			color: #333333;
			.zq-name {
				font-weight: 500;
				font-size: 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.z-img {
					width: 14px;
					height: 14px;
				}
			}
			.zq-address-info {
				margin-top: 12px;
				display: flex;
				font-size: 14px;
				.zi-img {
					width: 20px;
					height: 20px;
					margin-right: 6px;
				}
				.address-text {
					flex: 1;
					display: flex;
          .text {
            flex: 1;
          }
					.at-img {
						width: 12px;
						height: 14px;
					}
				}
			}
			.zq-time {
				margin-top: 8px;
				height: 22px;
				background: #FFF8ED;
				font-weight: 400;
				font-size: 12px;
				color: #FC6A01;
				line-height: 17px;
				display: flex;
				align-items: center;
				padding: 0 5px;
			}
		}
		// 预约送货时间
		.yy-time {
			padding: 15px 16px;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 10px;
			border-radius: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text, .select {
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
			}
			.select {
				flex: 1;
				color: #C4C4C4;
				font-size: 14px;
				font-weight: 400;
				line-height: 14px;
				text-align: right;
				margin-left: 10px;
				.s-img {
					width: 14px;
					height: 14px;
					margin-left: 6px;
				}
			}
			.selected {
				color: #0EC76E;
			}
		}
		// 商品信息
		.goods-info {
			margin-top: 10px;
			padding: 20px 0;
			border-radius: 10px;
			box-sizing: border-box;
			background-color: #fff;
			.shop-info {
				padding: 0 12px;
				display: flex;
				align-items: center;
				.store {
					width: 18px;
					height: 18px;
				}
				.shop-name {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 14px;
					margin: 0 6px;
				}
			}
			.goods-list {
				padding: 10px 12px;
				.intro {
					.intro-name {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						line-height: 19px;
						margin-bottom: 6px;
					}
					.intro-value {
						width: 100%;
						min-height: 100px;
						textarea {
							width: 100%;
							padding: 10px;
							color: #333333;
							font-size: 14px;
							min-height: 100px;
							background: #F6F6F6;
							border-radius: 10px;
							box-sizing: border-box;
						}
					}
				}
			}
			.price {
				margin-top: 10px;
			}
			.price, .psf, .ps-type {
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 14px;
				padding: 0 12px;
				color: #666666;
				line-height: 19px;
				margin-bottom: 12px;
				text {
					&:nth-last-of-type(1) {
						color: #333333;
					}
				}
			}
			
		}
		.pay-type {
			margin-top: 10px;
			padding: 15px 16px;
			border-radius: 10px;
			background-color: #fff;
			.title {
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				margin-bottom: 8px;
			}
			.pay-list {
				display: grid;
				gap: 0 10px;
				grid-template-columns: repeat(2, 1fr);
				.pay-item {
					height: 40px;
					display: flex;
					border-radius: 5px;
					padding-left: 25px;
					align-items: center;
					background: #FFFFFF;
					border: 1px solid #CCC;
					box-sizing: border-box;
					&.a-pay-item {
						border: 1px solid #FF3B1E;
						box-sizing: border-box;
					}
					.text {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
					}
					.pay-img {
						width: 26px;
						height: 26px;
						margin-right: 4px;
					}
				}
			}
		}
		// 提交订单
		.submit-order {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			// width: 100%;
			height: 50px;
			padding: 0 12px;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// box-sizing: border-box;
			.order-price {
				color: #666666;
				font-size: 14px;
				font-weight: 400;
				display: flex;
				align-items: center;
				text {
					color: #FF3B1E;
					font-size: 14px;
					font-weight: 700;
					text {
						font-size: 20px;
					}
				}
			}
			.sub-btn {
				height: 40px;
				color: #FFFFFF;
				font-size: 16px;
				padding: 0 27px;
				line-height: 40px;
				background: #FF3B1E;
				border-radius: 99px 99px 99px 99px;
			}
		}
  }
</style>
